<template>
  <div style="width: 100%; height:100%" ref="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      xdata:['类型一','类型二','类型三','类型四'],
      seriesdata:[
          {
            name:'指标一',
            data: [487,677,545,857],
            type: 'bar',
            stack: 'bar',
            barCategoryGap: '30' + '%'
          }
          ,
          {
            name:'指标二',
            data: [560,699,327,292],
            type: 'bar',
            stack: 'bar',
            barCategoryGap: '30' + '%'
          }
          
      ],
      echarts:null
    };
  },
  computed: {
    dataZoom() {
      return {
        show: false
      }
    },
  },
  methods: {
    echartsData() {
      const option = {
        color: [
          "#5b8ff9",
          "#61ddaa",
          "#65789b",
          "#f6bd16",
          "#7262fd",
          "#78d3f8",
          "#9661bc",
          "#f6903d",
          "#008685",
          "#f08bb4"],
        title: {
          show: true,
          text: "图表标题",
          left: "2%",
          top: "5%",
          textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 18,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          icon:'rect',
          itemWidth:10,
          itemHeight:10,
          itemGap: 10,
            show: false,
          left: "20%",
          top: '6%',
          orient: 'horizontal', 
          textStyle: {
            color: 'rgba(255,255,255,.8)'
          }
        },
        grid:{
          left:'9%',
          right:'1%',
          top:'20%',
          bottom:'9%',
        },
        xAxis: {
          data: this.xdata,
          axisLine: {
            show:true,
            lineStyle: {
              color: 'rgba(255,255,255,.8)'
            }
          },
          axisLabel: {
            align: "center",
            margin: 10,
            width: 40,
            verticalAlign: "top",
            overflow: "break",
            rotate: -10,
          },
          axisTick: {
            show: false
          },
          splitLine:{
            show:false,
            lineStyle: {    
              color: 'rgba(255,255,255,0.3)'
            }
          },
        },
        yAxis: {
          position: "center",
          axisLine: {
            show:true,
            lineStyle: {
              color: 'rgba(255,255,255,.8)'
            }
          },
          splitLine:{
            show:false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
        },
        label: {
          show: true,
          position: 'right',
          color: 'rgba(255,255,255,.8)'
        },
        dataZoom: this.dataZoom,
        series: this.seriesdata
      };
      return option;
    },
    renderEcharts(){
        this.echarts = echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.echartsData())
    },
  },
  mounted(){
    this.$nextTick(function(){
      this.renderEcharts()
    })
  }
};
</script>

<style>
</style>
